import Axios from 'axios';
import { Link } from 'react-router-dom';
import React from 'react';
import { apiPrefix } from '../../../shared/api';

import './index.less';


class PersonalData extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      personalData: {},
    };
  }
  componentDidMount() {
    const api = `${apiPrefix}api/v1/roster/resume?uid=${this.props.match.params.id}`;
    Axios.get(api)
      .then((response) => {
        console.log(response.data.data);
        this.setState({ personalData: response.data.data });
      });
  }
  render() {
    const { personalData } = this.state;
    const user = personalData.user;
    const moreInformation = personalData.roster;
    const educations = personalData.educations;
    const families = personalData.families;
    const workings = personalData.workings;
    const trainings = personalData.trainings;
    const certificate = personalData.certificate;
    return (
      <div className="content">
        <div>
          <h3>个人简历
            <button className="back-button" >
              <Link to="/RosterManage">返回</Link>
            </button>
            <button className="excelButton">导出</button>
          </h3>
          {user &&
          <table className="personal-data-table">
            <thead>
              <tr className="table-title">
                <th colSpan="6">个人资料</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <th>姓名</th>
                <td>{user.name}</td>
                <th>性别</th>
                <td>{user.sex}</td>
                <th>出生日期</th>
                <td>{user.birthday}</td>
              </tr>
              <tr>
                <th>曾用名</th>
                <td>{moreInformation.dynamics.曾用名}</td>
                <th>籍贯</th>
                <td>{moreInformation.dynamics.籍贯}</td>
                <th>民族</th>
                <td>{moreInformation.dynamics.民族}</td>
              </tr>
              <tr>
                <th>出生地</th>
                <td>{moreInformation.dynamics.出生地}</td>
                <th>学历</th>
                <td>{moreInformation.dynamics.学历}</td>
                <th>学位</th>
                <td>{moreInformation.dynamics.学位}</td>
              </tr>
              <tr>
                <th>毕业院校</th>
                <td>{moreInformation.dynamics.毕业院校}</td>
                <th>专业</th>
                <td>{moreInformation.dynamics.专业}</td>
                <th>毕业时间</th>
                <td>{moreInformation.dynamics.毕业时间}</td>
              </tr>
              <tr>
                <th>手机</th>
                <td colSpan="2" >{moreInformation.dynamics.手机}</td>
                <th>家庭电话</th>
                <td colSpan="2" >{moreInformation.dynamics.家庭电话}</td>
              </tr>
              <tr>
                <th>专业技术职称</th>
                <td>{moreInformation.dynamics.专业技术职称}</td>
                <th>评定时间</th>
                <td>{moreInformation.dynamics.评定时间}</td>
                <th>职称专业</th>
                <td>{moreInformation.dynamics.职称专业}</td>
              </tr>
              <tr>
                <th>身份证号</th>
                <td colSpan="3" >{moreInformation.dynamics.身份证号}</td>
                <th>健康状况</th>
                <td>{moreInformation.dynamics.健康状况}</td>
              </tr>
              <tr>
                <th>现家庭详细地址</th>
                <td colSpan="3" >{moreInformation.dynamics.现家庭详细地址}</td>
                <th>邮政编码</th>
                <td>{moreInformation.dynamics.邮政编码}</td>
              </tr>
              <tr>
                <th>户口性质</th>
                <td colSpan="3" >{moreInformation.dynamics.户口性质}</td>
                <th>家庭联系电话</th>
                <td>{moreInformation.dynamics.家庭联系电话}</td>
              </tr>
              <tr>
                <th>本单位工作时间</th>
                <td>{moreInformation.dynamics.本单位工作时间}</td>
                <th>婚否</th>
                <td>{moreInformation.dynamics.婚否}</td>
                <th>以前患有过何疾病</th>
                <td>{moreInformation.dynamics.以前患有过何疾病}</td>
              </tr>
              <tr className="table-title">
                <th colSpan="6">教育经历</th>
              </tr>
              <tr>
                <th>起止时间</th>
                <th>毕业院校</th>
                <th>专业</th>
                <th>学历</th>
                <th colSpan="2">毕业证书号</th>
              </tr>
              {
                educations.map((value, index) => (
                  <tr key={index}>
                    <td>{`${value.start_date}至${value.end_date}`}</td>
                    <td>{value.name}</td>
                    <td>{value.professional}</td>
                    <td>{value.education}</td>
                    <td colSpan="2">{value.code}</td>
                  </tr>
                ))
              }
              <tr className="table-title">
                <th colSpan="6">培训经历</th>
              </tr>
              <tr>
                <th>起止时间</th>
                <th>培训机构</th>
                <th>所获证书</th>
                <th colSpan="3">备注</th>
              </tr>
              {
                trainings.map((value, index) => (
                  <tr key={index}>
                    <td>{`${value.start_date}至${value.end_date}`}</td>
                    <td>{value.name}</td>
                    <td>{value.code_name}</td>
                    <td colSpan="3">{value.descr}</td>
                  </tr>
                ))
              }
              <tr className="table-title">
                <th colSpan="6">进入本公司前的相关工作经验</th>
              </tr>
              {
                workings.map((value, index) => (
                  <tr key={index}>
                    <td>{`${value.start_date}至${value.end_date}`}</td>
                    <td>{value.name}</td>
                    <td colSpan="2">{value.duty}</td>
                    <td colSpan="2">{value.scale}</td>
                  </tr>
                ))
              }
              <tr>
                <th>起止时间</th>
                <th>项目名称</th>
                <th colSpan="2">工程规模</th>
                <th colSpan="2">岗位职务</th>
              </tr>
              <tr className="table-title">
                <th colSpan="6">进入公司后从事监理工作简历</th>
              </tr>
              <tr>
                <th>起止时间</th>
                <th>项目名称</th>
                <th colSpan="2">工程规模</th>
                <th colSpan="2">岗位职务</th>
              </tr>
              <tr className="table-title">
                <th colSpan="6">家庭主要成员</th>
              </tr>
              <tr>
                <th>姓名</th>
                <th>关系</th>
                <th>单位</th>
                <th>联系方式</th>
                <th colSpan="2">备注</th>
              </tr>
              {
                families.map((value, index) => (
                  <tr key={index}>
                    <td>{value.name}</td>
                    <td>{value.relationship}</td>
                    <td>{value.organ}</td>
                    <td>{value.telphone}</td>
                    <td colSpan="2">{value.descr}</td>
                  </tr>
                ))
              }
              <tr className="table-title">
                <th colSpan="6">奖惩情况</th>
              </tr>
              <tr>
                <td colSpan="6" />
              </tr>
              <tr className="table-title">
                <th colSpan="6">能力证书</th>
              </tr>
              <tr>
                <th>证书类型</th>
                <th>证书等级</th>
                <th>取证时间</th>
                <th colSpan="3">证书编号</th>
              </tr>
              {
                certificate.map((value, index) => (
                  <tr key={index}>
                    <td>{value.fullname}</td>
                    <td>{value.level}</td>
                    <td>{value.mfd_date}</td>
                    <td colSpan="3">{value.number}</td>
                  </tr>
                ))
              }
              <tr>
                <th colSpan="6">其他需要说明的事项</th>
              </tr>
              <tr>
                <td colSpan="6" />
              </tr>
              <tr>
                <th colSpan="6">备注</th>
              </tr>
              <tr>
                <td colSpan="6" />
              </tr>
            </tbody>
          </table>}
        </div>
      </div>
    );
  }
}

export default PersonalData;
